<template>
	<div class="all">
		<el-alert
			title="提示"
			description="请注意当标签一旦创建成功后就不允许修改，只能删除或者新增！但是在删除前请手动确认该分类下已无课程后再进行删除，否则将会导致数据冗余增大，加重服务器的负担。"
			type="error"
			show-icon
			close-text="知道了">
		</el-alert>
		<h2>
			<el-page-header @back="$utils.goBack()" content="所有分类">
			</el-page-header>
		</h2>
		<el-divider></el-divider>
		
		<el-tag
			:key="tag.objectId"
			v-for="tag in classDataGetter"
			closable
			:hit="true"
			effect="plain"
			:disable-transitions="false"
			@close="handleClose(tag)">
			{{ tag.classTitle }}
		</el-tag>
		<el-input
			class="input-new-tag"
			v-if="inputVisible"
			v-model="inputClassValue"
			ref="saveTagInput"
			size="small"
			placeholder="分类名"
			@keyup.enter.native="handleInputConfirm"
			@blur="handleInputConfirm">
		</el-input>
		<el-button v-else
		           class="button-new-tag"
		           size="small"
		           @click="showInput">
			+ 新分类
		</el-button>
	</div>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator"
	import { State, Getter, Action, Mutation } from 'vuex-class'
	
	@Component
	export default class allComponents extends Vue {
		public inputVisible:boolean = false;
		public inputClassValue:string = null;
		@Getter('getClassList') classDataGetter;
		@Action('deleteClass') deleteClassAction;
		@Action('addClass') addClassAction;
		
		created() {
	
		}
		
		/**
		 * 删除分类
		 */
		handleClose(tag) {
			this.$confirm(`请确保需要删除的 [ ${tag.classTitle} ] 分类下已经没有课程, 继续?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.deleteClassAction(tag);
			}).catch(() => { });
		}
		
		/**
		 * 新分类 被点击，显示输入框并获得焦点
		 */
		showInput() {
			this.inputVisible = true;
			this.$nextTick(_ => this.$refs.saveTagInput.$refs.input.focus());
		}
		
		/**
		 * 提交输入的标签
		 */
		handleInputConfirm() {
			let inputValue = this.inputClassValue;
			if (inputValue) {
				this.addClassAction(inputValue);
				this.$forceUpdate();
			}
			this.inputVisible = false;
			this.inputClassValue = '';
		}
		
	}
</script>

<style scoped lang="less">
	.el-tag {
		margin-left: 10px;
		margin-bottom: 15px;
	}
	.input-new-tag {
		width: 90px;
		margin-left: 10px;
	}
	.el-alert {
		margin-bottom: 20px;
	}
</style>